<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>事件冒泡</title>
    <!-- <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{msg}}
      <p>冒泡传递</p>
      <ul @click="handleUl">
        <li @Click="handleli">11111</li>
        <li @Click="handleli">22222</li>
        <li @Click="handleli">33333</li>
      </ul>
      <br />
      <p>冒泡传递解决方案一字节点停止</p>
      <ul v-on:click="handleUl">
        11
        <li @click.stop="handleli">11111</li>
        <li @click="">22222</li>
        <li>33333</li>
      </ul>
      <br />
      <p>冒泡传递解决方案二父亲不接收孩子的冒泡</p>
      <ul @click.self="handleUl">
        现在我是父亲节点
        <li @click="handleli">11111</li>
        <li @click.once="handleli">22222</li>
        <li>33333</li>
      </ul>
      按住enter提交：<input type="text" @keyup.enter="enterHandle($event)" />
      输入就提交：<input type="text" @keyup="enterHandle($event)" />
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "hello world",
        },
        methods: {
          handleUl() {
            console.log("this is handle ul message");
          },
          handleli() {
            console.log("this is handle li message");
          },
          enterHandle(event) {
            console.log(event.target.value);
          },
        },
      });
    </script>
  </body>
</html>
